<template>
  <div class="dashboard-container">
    <el-row :gutter="20">
      <el-col :span="12">
        <div class="dashboard-item">
          <div class="item-title">
            <div class="title-icon">
              <img :src="task" alt="">
              <span v-if="roleType=='e036_04'">接收的任务|{{ taskData.length }}</span>
              <span v-else>分配的任务|{{ taskData.length }}</span>
            </div>
            <div class="title-btn">
              <el-button type="primary" @click="getTaskAll()">查询</el-button>
              <el-button type="primary" @click="resetForm('task')">重置</el-button>
            </div>
          </div>
          <div class="item-form">
            <el-input v-model="taskQuery.taskName" class="ipt-item w-200" placeholder="请输入名称" maxlength="255" />
            <el-select
              v-model="taskQuery.taskType"
              class="ipt-item w-200"
              placeholder="请选类型"
            >
              <el-option
                v-for="(item,index) in taskTypes"
                :key="index+'application_type'"
                :value="item.code"
                :label="item.codeName"
              />
            </el-select>
          </div>
          <div style=" overflow-y:auto; height:400px;">
            <div class="item-input">
              <el-table v-loading="tableLoading1" border size="small" :data="taskData" style="width: 100%">
                <el-table-column type="index" width="45" />
                <el-table-column prop="alarmInformation" label="任务内容" show-overflow-tooltip>
                  <template slot-scope="scope">
                    <el-link type="primary">
                      <router-link :to="{ path: '/task/task', query: { id: scope.row.id }}">{{ scope.row.taskContent }}
                      </router-link>
                    </el-link>
                  </template>
                </el-table-column>
                <el-table-column prop="taskType" width="100" label="类型" show-overflow-tooltip>
                  <template slot-scope="scope">{{ getDictLabel('e008', scope.row.taskType) }}
                  </template>
                </el-table-column>
                <el-table-column prop="taskStatus" width="100" label="状态" show-overflow-tooltip>
                  <template slot-scope="scope">{{ getDictLabel('e009', scope.row.taskStatus) }}
                  </template>
                </el-table-column>
              </el-table>
            </div>
          </div>
        </div>
      </el-col>
      <el-col :span="12">
        <div class="dashboard-item">
          <div class="item-title">
            <div class="title-icon">
              <img :src="notice" alt="">
              <span>运维提醒|{{ messageQuery.total }}</span>
            </div>
            <div class="title-btn">
              <el-button type="primary" @click="getRemind">查询</el-button>
            </div>
          </div>
          <div style=" overflow-y:auto; height:400px;">
            <div class="item-input">
              <el-table v-loading="tableLoading2" border size="small" :data="messageData" style="width: 100%">
                <el-table-column type="index" width="45" />
                <el-table-column label="预警内容" show-overflow-tooltip>
                  <template slot-scope="scope">
                    {{ scope.row.plansType }} —— {{ scope.row.name }}  {{ scope.row.outletName }} {{ scope.row.shortName }}
                    上一次时间：{{ parseTime(scope.row.lastActualTime, '{y}-{m}-{d}') }}，下一次时间：{{ parseTime(scope.row.planTime, '{y}-{m}-{d}') }}
                    <span v-if="scope.row.remark.indexOf('超期')!= -1" style="color:red">
                      {{ scope.row.remark }}
                    </span>
                    <span v-else-if="scope.row.remark.indexOf('今天到期')!= -1" style="color:#1e9aca">
                      {{ scope.row.remark }}
                    </span>
                    <span v-else>
                      {{ scope.row.remark }}
                    </span>
                  </template>
                </el-table-column>
              </el-table>
              <div class="pagination-container">
                <pagination
                  v-show="messageQuery.total>0"
                  :total="messageQuery.total"
                  :page.sync="messageQuery.page"
                  :limit.sync="messageQuery.limit"
                  @pagination="flushPage('message')"
                />
              </div>
            </div>
          </div>
        </div>
      </el-col>
      <el-col :span="12">
        <div class="dashboard-item">
          <div class="item-title">
            <div class="title-icon">
              <img :src="warning" alt="">
              <span>报警信息|{{ alarmQuery.total }}</span>
            </div>
            <div class="title-btn">
              <el-button type="primary" @click="getAlarmAll()">查询</el-button>
              <el-button type="primary" @click="resetForm('alarm')">重置</el-button>
            </div>
          </div>
          <div class="item-form">
            <!-- <el-select
              v-model="alarmQuery.select"
              class="ipt-item w-200"
              placeholder="请选择控制级别"
            />
            <el-select
              v-model="alarmQuery.select"
              class="ipt-item w-200"
              placeholder="请选择行业"
            />
            <el-select
              v-model="alarmQuery.select"
              class="ipt-item w-200"
              placeholder="请选择区域"
            /> -->
            <!-- <el-select
              v-model="alarmQuery.enterpriseId"
              class="ipt-item w-200"
              placeholder="请选择企业"
            /> -->
            <el-select
              v-model="alarmQuery.alarmType"
              class="ipt-item w-200"
              placeholder="报警类型"
              clearable
            >
              <el-option
                v-for="(item,index) in alarmTypes"
                :key="index+'application_type'"
                :value="item.code"
                :label="item.codeName"
              />
            </el-select>
          </div>
          <div style=" overflow-y:auto; height:400px;">
            <div class="item-input">
              <el-table v-loading="tableLoading3" border size="small" :data="alarmData" style="width: 100%">
                <el-table-column type="index" width="45" />
                <el-table-column prop="alarmInformation" label="报警信息" show-overflow-tooltip>
                  <template slot-scope="scope">
                    <el-link type="primary">
                      <router-link :to="{ path: '/alarm/alarm', query: { id: scope.row.id }}">{{ scope.row.alarmInformation }}
                      </router-link>
                    </el-link>
                  </template>
                </el-table-column>
                <el-table-column prop="alarmType" label="报警类型" width="90">
                  <template slot-scope="scope">{{ getDictLabel('e001', scope.row.alarmType) }}
                  </template>
                </el-table-column>
              </el-table>
              <div class="pagination-container">
                <pagination
                  v-show="alarmQuery.total>0"
                  :total="alarmQuery.total"
                  :page.sync="alarmQuery.page"
                  :limit.sync="alarmQuery.limit"
                  @pagination="flushPage('alarm')"
                />
              </div>
            </div>
          </div>
        </div>
      </el-col>
      <el-col :span="12">
        <div class="dashboard-item">
          <div class="item-title">
            <div class="title-icon">
              <img :src="task" alt="">
              <span>综合信息</span>
            </div>
            <!-- <div class="title-btn">
              <el-button type="primary" @click="getInfoAll()">查询</el-button>
              <el-button type="primary" @click="resetForm('info')">重置</el-button>
            </div> -->
          </div>
          <!-- <div class="item-form">
            <el-input v-model="infoQuery.name" class="ipt-item w-200" placeholder="请输入名称" maxlength="255" />
            <el-select
              v-model="infoQuery.infoType"
              class="ipt-item w-200"
              placeholder="请选类型"
            >
              <el-option
                v-for="(item,index) in infoTypes"
                :key="index+'application_type'"
                :value="item.code"
                :label="item.codeName"
              />
            </el-select>
          </div>-->
          <div style="display: flex;height: 100%;">
            <div v-if="roleType !== 'e036_05' && roleType !== 'e036_06'" style="flex: 2;display:flex;flex-direction: row;height: 100%;padding-left: 10px;">
              <div style="flex:1;height:100%;color: #777;display: flex;flex-direction: column;justify-content: space-around;">
                <div style="display:flex;border-left: 4px solid #99d01d;"><span style="flex: 0 0 100px;padding-right: 10px;text-align:right;">客户:</span><span style="font-weight: bold;font-size: 18px;color: #1e9aca;">{{ count.countEnt }}</span></div>
                <div style="display:flex;border-left: 4px solid #99d01d;"><span style="flex: 0 0 100px;padding-right: 10px;text-align:right;">排口在线:</span><span style="font-weight: bold;font-size: 18px;color: #1e9aca;">{{ count.countOutZX }}</span></div>
                <div style="display:flex;border-left: 4px solid #99d01d;"><span style="flex: 0 0 100px;padding-right: 10px;text-align:right;">运营设备:</span><span style="font-weight: bold;font-size: 18px;color: #1e9aca;">{{ count.countEqu1 }}</span></div>
              </div>
              <div style="flex:1;height:100%;color: #777;display: flex;flex-direction: column;justify-content: space-around;">
                <div style="display:flex;border-left: 4px solid #99d01d;"><span style="flex: 0 0 100px;padding-right: 10px;text-align:right;">排放口:</span><span style="font-weight: bold;font-size: 18px;color: #1e9aca;">{{ count.countOut }}</span></div>
                <div style="display:flex;border-left: 4px solid #99d01d;"><span style="flex: 0 0 100px;padding-right: 10px;text-align:right;">排口离线:</span><span style="font-weight: bold;font-size: 18px;color: #1e9aca;">{{ count.countOutLX }}</span></div>
                <div style="display:flex;border-left: 4px solid #99d01d;"><span style="flex: 0 0 100px;padding-right: 10px;text-align:right;">质保设备:</span><span style="font-weight: bold;font-size: 18px;color: #1e9aca;">{{ count.countEqu2 }}</span></div>
              </div>
            </div>
            <div style="flex: 2;">
              <div id="ech" style="height:100%;" />
            </div>
          </div>
          <!--<div style="overflow-y:auto;">
             <div class="item-input">
              <el-table v-loading="tableLoading2" border size="small" :data="infoData" style="width: 100%">
                <el-table-column type="index" width="45" />
                <el-table-column prop="name" label="名称" show-overflow-tooltip />
                <el-table-column prop="infoType" label="类型" show-overflow-tooltip>
                  <template slot-scope="scope">{{ getDictLabel('e039', scope.row.infoType) }}
                  </template>
                </el-table-column>
              </el-table>
              <div class="pagination-container">
                <pagination
                  v-show="infoQuery.total>0"
                  :total="infoQuery.total"
                  :page.sync="infoQuery.page"
                  :limit.sync="infoQuery.limit"
                  @pagination="flushPage('info')"
                />
              </div>
            </div>
          </div>-->
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import echarts from 'echarts'
import notice from '@/assets/images/index/notice.png'
import task from '@/assets/images/index/task.png'
import warning from '@/assets/images/index/warning.png'
import Pagination from '@/components/Pagination'
import { getDict } from '@/utils/dict'
import { getDictLabel, parseTime } from '@/utils'
import { getPage as getInfoPage } from '@/api/info/allInfo'
import { getList as getTaskList } from '@/api/info/task'
import { getList as getAlarmPage } from '@/api/business/alarm'
import { getList, getRemindPage } from '@/api/base/maintenance'
import { count, countAlarmType } from '@/api/base/analysis'
import { getRoleType } from '@/utils/buttons'
export default {
  name: 'Dashboard',
  components: {
    Pagination
  },
  data() {
    return {
      tableLoading1: false,
      tableLoading2: false,
      tableLoading3: false,
      notice,
      task,
      warning,
      infoQuery: {
        page: 1, limit: 10, total: 0,
        name: null, infoType: null
      },
      taskQuery: {
        page: 1, limit: 10, total: 0,
        taskName: null, taskType: 'e008_01', taskStatus: 'e009_00,e009_01'
      },
      alarmQuery: {
        page: 1, limit: 10, total: 0,
        enterpriseId: null, alarmType: null
      },
      messageQuery: {
        page: 1, limit: 10, total: 0
      },
      query: {
        select: ''
      },
      infoData: [],
      taskData: [],
      messageData: [],
      alarmData: [],
      textarea: '',
      infoTypes: [],
      taskTypes: [],
      alarmTypes: [],
      roleType: null,
      count: {
        countEnt: 0,
        countOut: 0,
        countEqu1: 0,
        countEqu2: 0,
        countOutZX: 0,
        countOutLX: 0
      }
    }
  },
  computed: {},
  created() {
    this.infoTypes = getDict('e039')
    this.taskTypes = getDict('e008')
    this.alarmTypes = getDict('e001')
    this.roleType = this.getRoleType()
    this.initData()
  },
  methods: {
    getDictLabel, parseTime, getRoleType,
    getCount() {
      count().then(result => {
        this.count = result.data
      }).catch(() => {

      })
    },
    getCountAlarmType() {
      countAlarmType().then(result => {
        const data = []
        const series = []
        result.data.data.forEach(item => {
          data.push(this.getDictLabel('e001', item.alarmType))
          series.push(item.count)
        })
        this.inEcharts(data, series)
      }).catch(() => {

      })
    },
    inEcharts(data, series) {
      const chartDom = document.getElementById('ech')
      const myChart = echarts.init(chartDom)
      var scale = 1
      console.log(data, series)
      const echartData = []
      data.map((label, i) => {
        echartData.push({
          value: series[i],
          name: label
        })
      })
      var rich = {
        yellow: {
          color: '#3bc7ff',
          fontSize: 14 * scale,
          padding: [8, 0],
          align: 'center'
        },
        total: {
          color: '#A2C7F3',
          fontSize: 60 * scale,
          align: 'center'
        },
        white: {
          color: '#a2c7f3',
          align: 'center',
          fontSize: 18 * scale,
          padding: [8, 0]
        },
        blue: {
          color: '#3bc7ff',
          fontSize: 18 * scale,
          align: 'center'
        },
        hr: {
          borderColor: '#a2c7f3',
          width: '100%',
          borderWidth: 1,
          height: 0
        }
      }
      const option = {
        backgroundColor: '',
        series: [{
          name: '总考生数量',
          type: 'pie',
          radius: ['45%', '60%'],
          hoverAnimation: false,
          color: ['#fc962c', '#d83472', '#0F9AF8', '#2B63D5', '#2039C3', '#2ECACE', '#6F81DA'],
          label: {
            normal: {
              formatter: function(params, ticket, callback) {
                var total = 0 // 考生总数量
                var percent = 0 // 考生占比
                echartData.forEach(function(value, index, array) {
                  total += value.value
                })
                percent = ((params.value / total) * 100).toFixed(1)
                return '{darkblue|' + params.name + '}(' + params.value + ')\n{blue|' + percent + '%}'
              },
              rich: rich
            }
          },
          labelLine: {
            normal: {
              length: 15,
              length2: 6,
              lineStyle: {
                color: '#a2c7f3'
              }
            }
          },
          data: echartData
        }]
      }
      myChart.setOption(option)
    },
    initData() {
      // this.getInfoAll()
      this.getAlarmAll()
      this.getRemind()
      this.getCountAlarmType()
      if (this.roleType !== 'e036_05' && this.roleType !== 'e036_06') {
        this.getCount()
        this.getTaskAll()
      }
    },
    getMaintenancePlan() {
      getList().then(res => {
        console.log(res)
      })
    },
    getTaskAll() {
      if (this.roleType !== 'e036_04') {
        this.taskQuery.taskStatus = 'e009_00,e009_01,e009_02'
      }
      const query = JSON.parse(JSON.stringify(this.taskQuery))
      if (this.taskQuery.taskType === 'e008_01') {
        query.taskType = null
      }
      this.tableLoading1 = true
      getTaskList(query).then(result => {
        this.tableLoading1 = false
        this.taskQuery.total = result.data.total
        this.taskData = result.data.list
      }).catch(() => {
        this.tableLoading1 = false
      })
    },
    getRemind() {
      const query = JSON.parse(JSON.stringify(this.messageQuery))
      getRemindPage(query).then(result => {
        this.tableLoading2 = false
        this.messageQuery.total = result.data.row.total
        this.messageData = result.data.row.records
      }).catch(() => {
        this.tableLoading2 = false
      })
    },
    getInfoAll() {
      const query = JSON.parse(JSON.stringify(this.infoQuery))
      this.tableLoading2 = true
      getInfoPage(query).then(result => {
        this.tableLoading2 = false
        this.infoQuery.total = result.data.total
        this.infoData = result.data.list
      }).catch(() => {
        this.tableLoading2 = false
      })
    },
    getAlarmAll() {
      const query = JSON.parse(JSON.stringify(this.alarmQuery))
      this.tableLoading3 = true
      getAlarmPage(query).then(result => {
        this.tableLoading3 = false
        this.alarmQuery.total = result.data.total
        this.alarmData = result.data.rows
      }).catch(() => {
        this.tableLoading3 = false
      })
    },
    resetForm(formName) {
      if (formName === 'task') {
        this.taskQuery = {
          ...this.taskQuery,
          taskName: null, taskType: 'e008_01'
        }
      } else if (formName === 'info') {
        this.infoQuery = {
          ...this.infoQuery,
          name: null, infoType: null
        }
      } else if (formName === 'alarm') {
        this.alarmQuery = {
          ...this.alarmQuery,
          enterpriseId: null, alarmType: null
        }

        console.log(this.alarmQuery)
      }
    },
    flushPage(name) {
      this.clearQuery(name)
      if (name === 'task') {
        this.getTaskAll()
      } else if (name === 'info') {
        this.getInfoAll()
      } else if (name === 'alarm') {
        this.getAlarmAll()
      } else if (name === 'message') {
        this.getRemind()
      }
    },
    clearQuery(name) {
      if (name === 'info') {
        this.infoQuery = {
          page: 1, limit: 10, total: 0,
          name: null, infoType: null
        }
      } else if (name === 'task') {
        this.taskQuery = {
          page: 1, limit: 10, total: 0,
          taskName: null, taskType: 'e008_01'
        }
      } else if (name === 'alarm') {
        this.alarmQuery = {
          page: 1, limit: 10, total: 0,
          enterpriseId: null, alarmType: null
        }
      }
    }
  }
}
</script>

<style lang="scss">
.dashboard-container {
  height: 100%;
  padding: 10px 30px;

  .el-row {
    height: 100%;

    .el-col {
      height: 50%;
    }
  }

  .dashboard-item {
    position: relative;
    background: #fff;
    height: calc(100% - 20px);
    border-radius: 15px;
    padding: 10px;
    display: flex;
    flex-direction: column;

    .item-title {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 10px;
      flex: 0 0 50px;

      .title-icon {
        display: flex;
        align-items: center;

        img {
          height: 25px;
          width: 25px;
        }

        span {
          padding-left: 15px;
          color: #156dac;
          font-weight: 600;
        }
      }

      .title-btn {
        .el-button {
          background: #156dac;
        }
      }
    }

    .item-form {
      .ipt-item {
        margin-right: 10px;
        margin-bottom: 10px;
      }

      .w-200 {
        width: 200px;
      }
    }

    .item-input {
      flex: 1;

      .el-textarea {
        height: 100%;

        .el-textarea__inner {
          height: 100%;
          background: #eee;
        }
      }
    }
  }
}
</style>
